<template>
	<view style="padding: 10px 20px;display: flex;flex-direction: column;">
		<uni-card style="height: 100%;">
			<view class="gl-media-view" :style="{maxHeight:swiperH+'px'}" style="display: flex;gap: 10px;">
				<view class="ui-all" style="display: flex;flex-direction: column;gap: 10px;padding: 0 10px;">
					<image :src="sConf.cos + (curProduct?.face || '/media/default/cover.png')" mode=""
						@click="changeCover" style="width: 128px;height: 170px;border-radius: 5px;"></image>
				</view>
				<view class="ui-all" style="display: flex;flex-direction: column;gap: 10px;">
					<view class="" style="display: flex;gap: 20px;">
						<view class="ui-list" style="display: flex;align-items: center;gap: 10px;">
							<uni-data-select v-model="curProduct.modep" :localdata="maxModeData" emptyTips="没有"
								label="选择大类" placeholder="所有大类" style="width: 200px;"
								@change="maxModeChange"></uni-data-select>
						</view>
						<view class="ui-list" style="display: flex;align-items: center;gap: 10px;">
							<uni-data-select v-model="curProduct.mode" :localdata="minModeData" emptyTips="没有"
								label="选择小类" placeholder="所有小类" style="width: 200px;"
								@change="minModeChange"></uni-data-select>
						</view>
						<view class="ui-list" style="display: flex;align-items: center;gap: 10px;">
							<uni-data-select v-model="curProduct.pid" :localdata="placeData" emptyTips="没有" label="选择商户"
								placeholder="所有商户" style="width: 200px;"></uni-data-select>
						</view>
					</view>
					<view class="" style="display: flex;gap: 20px;">
						<view class="ui-list" style="display: flex;align-items: center;gap: 10px;">
							<text style="font-weight: bold;">产品名称:</text>
							<uni-easyinput v-model="curProduct.name" trim="all"></uni-easyinput>
						</view>
						<view class="ui-list" style="display: flex;align-items: center;gap: 10px;">
							<text>商品热销:</text>
							<uni-number-box v-model="curProduct.hot" :min="0" :max="999"></uni-number-box>
						</view>
					</view>
					<view class="" style="display: flex;gap: 20px;">
						<checkbox-group @change="checkBoxChange">
							<label>
								<checkbox value="is_master" :checked="curProduct?.is_master === 1"
									style="transform:scale(0.7)" />
								主营商品
							</label>
							<label>
								<checkbox value="is_money" :checked="curProduct?.is_money === 1"
									style="transform:scale(0.7)" />
								线上支付
							</label>
							<label>
								<checkbox value="is_points" :checked="curProduct?.is_points === 1"
									style="transform:scale(0.7)" />
								积分兑换
							</label>
							<label>
								<checkbox value="is_card" :checked="curProduct?.is_card === 1"
									style="transform:scale(0.7)" />
								礼包兑换
							</label>
							<label>
								<checkbox value="is_share" :checked="curProduct?.is_share === 1"
									style="transform:scale(0.7)" />
								分类推荐
							</label>
							<label>
								<checkbox value="is_virtual" :checked="curProduct?.is_virtual === 1"
									style="transform:scale(0.7)" />
								虚拟商品
							</label>
						</checkbox-group>
					</view>
					<view class="" style="display: flex;gap: 20px;">
						<label>
							创建时间：{{curProduct?.create}}
						</label>
						<label>
							上次修改：{{curProduct?.lasttime}}
						</label>
						<label style="font-weight: bold;">注：商品规格列表至少需要一条数据记录</label>
					</view>
					<view v-if="JSON.stringify(curProduct) !== JSON.stringify(oldProduct)"
						style="display: flex;gap: 10px;justify-content: flex-end;width: 100%;">
						<view class="gl-button gl-button-success" @tap="actionsClick('save')">
							<uni-icons type="checkbox" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">保存</text>
						</view>
						<view class="gl-button gl-button-base" @tap="actionsClick('reload')">
							<uni-icons type="close" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">取消</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 30vh;">
				<!-- 产品封面上传 -->
				<cos-multiple-post ref="cosCover" :host="sConf.host" :token="sConf.auth.token" path="product" onHide
					once @upFinish="EventFinish"></cos-multiple-post>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				oldProduct: null,
				curProduct: null,
				maxModeData: [],
				minModeData: [],
				placeData: []
			}
		},
		mounted() {
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.oldProduct = JSON.parse(JSON.stringify(this.data))
			this.curProduct = JSON.parse(JSON.stringify(this.data))
			this.loadDefData()
		},
		props: {
			data: {
				type: Object,
				default: null
			}
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-media-view').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - 80;
					});
				})
			},
			async loadDefData() {
				console.log('loadDefData');

				// 加载大类		
				await this.loadModeList(0).then(res => {
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.name
						})
					})
					this.maxModeData = tmpData;
				});
				await this.loadModeList(this.curProduct.modep).then(res => {
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.name
						})
					})
					this.minModeData = tmpData;
				});
				// 加载商户
				await this.loadPlaceList().then(res => {
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.nicename
						})
					})
					this.placeData = tmpData;
				})
			},
			EventFinish(e) {
				console.log('EventFinish', e);
				this.curProduct.face = e[0];
			},
			changeCover() {
				this.$refs.cosCover.open()
			},
			maxModeChange(e) {
				console.log('maxModeChange', e);
				this.curProduct.mode = 0
				this.loadModeList(e).then(res => {
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.name
						})
					})
					this.minModeData = tmpData;
				});
			},
			minModeChange() {
				console.log('minModeChange');
			},
			checkBoxChange(e) {
				console.log('checkBoxChange', e.detail.value);
				this.curProduct.is_money = e.detail.value.includes('is_money') ? 1 : 0
				this.curProduct.is_master = e.detail.value.includes('is_master') ? 1 : 0
				this.curProduct.is_points = e.detail.value.includes('is_points') ? 1 : 0
				this.curProduct.is_card = e.detail.value.includes('is_card') ? 1 : 0
				this.curProduct.is_share = e.detail.value.includes('is_share') ? 1 : 0
				this.curProduct.is_virtual = e.detail.value.includes('is_virtual') ? 1 : 0
			},
			actionsClick(e) {
				console.log('actionsClick', e);
				if (e === 'reload') {
					this.curProduct = JSON.parse(JSON.stringify(this.oldProduct))
				}
				if (e === 'save') {
					if (this.curProduct.mode < 1 || this.curProduct.modep < 1) {
						uni.showToast({
							title: "选择分类错误"
						})
						return
					}
					if (this.curProduct.pid < 1) {
						uni.showToast({
							title: "选择商户错误"
						})
						return
					}
					if (!this.curProduct.name) {
						uni.showToast({
							title: "商品名称错误"
						})
						return
					}
					this.loadPriductPatch().then(res => {
						this.curProduct = JSON.parse(JSON.stringify(res.resmsg))
						this.oldProduct = JSON.parse(JSON.stringify(res.resmsg))
						uni.showToast({
							title: '提交商品成功'
						})
					}).catch(err => {
						uni.showModal({
							title: '失败',
							content: '创建商品失败',
							showCancel: false
						})
					})
				}
			},
			loadModeList(e) {
				let host = this.sConf.host + '/admin/cargoMode/';
				let token = this.sConf.auth.token || '';
				let data = {
					ordering: '-hot',
					parent: e
				}
				return new Promise((resolve, reject) => {
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			loadPlaceList() {
				let host = this.sConf.host + '/admin/placeList/';
				let token = this.sConf.auth.token || '';
				let data = {
					ordering: "-id"
				}
				return new Promise((resolve, reject) => {
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})

			},
			loadPriductPatch() {
				let host = this.sConf.host + '/admin/cargoBase/' + this.curProduct.id + '/';
				let token = this.sConf.auth.token || '';
				let data = psMethod.cutNull(this.curProduct)
				return new Promise((resolve, reject) => {
					psMethod.authenticatorPatchSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})

				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>